<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo $t['siteTitle']; ?></title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 自定义Tailwind配置 - 采用科技感风格的色彩方案 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0A1128', // 深蓝黑色 - 科技感主色调
            secondary: '#0070F3', // 亮蓝色 - 辅助色
            accent: '#64FFDA', // 青绿色 - 强调色
            dark: '#050A14', // 更深的背景色
            light: '#E2E8F0', // 浅色文本
          },
          fontFamily: {
            cyber: ['Orbitron', 'Segoe UI', 'Roboto', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-glow {
        text-shadow: 0 0 10px currentColor, 0 0 20px currentColor/70;
      }
      .border-glow {
        box-shadow: 0 0 10px currentColor, 0 0 20px currentColor/50;
      }
      .bg-grid {
        background-image: 
          linear-gradient(rgba(100, 255, 218, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(100, 255, 218, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
      }
      .animate-pulse-fast {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .animate-flicker {
        animation: flicker 3s linear infinite;
      }
    }

    @keyframes flicker {
      0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: 1;
      }
      20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.4;
      }
    }
  </style>
  <!-- 引入科技感字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-light font-cyber overflow-x-hidden bg-grid">
  <!-- 顶部装饰条 -->
  <div class="h-1 bg-gradient-to-r from-secondary via-accent to-secondary"></div>
  
  <!-- 导航栏 -->
  <header id="navbar" class="sticky top-0 w-full z-50 transition-all duration-300 bg-primary/80 backdrop-blur-md border-b border-accent/20">
    <nav class="container mx-auto px-4 py-3 flex justify-between items-center">
      <a href="#" class="flex items-center space-x-2">
        <div class="w-10 h-10 rounded-full bg-accent/20 border border-accent/40 flex items-center justify-center">
          <i class="fa fa-gamepad text-accent"></i>
        </div>
        <span class="text-2xl font-bold text-accent text-glow">
          <?php echo $t['siteTitle'];?>
        </span>
      </a>
      
      <!-- 桌面导航 -->
      <div class="hidden md:flex items-center space-x-8">
        <?php foreach($t['nav'] as $item): ?>
          <?php if(isset($item['isCta']) && $item['isCta']): ?>
            <a href="<?php echo $item['link']; ?>" class="bg-accent hover:bg-accent/90 text-primary font-bold py-2 px-6 rounded-md transition-all transform hover:scale-105 border border-accent/50 border-glow">
              <?php echo $item['name']; ?>
            </a>
          <?php else: ?>
            <a href="<?php echo $item['link']; ?>" class="hover:text-accent transition-colors relative group">
              <?php echo $item['name']; ?>
              <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-accent transition-all group-hover:w-full"></span>
            </a>
          <?php endif; ?>
        <?php endforeach; ?>
        
        <!-- 语言选择器 -->
        <div class="relative group">
          <button class="flex items-center space-x-1 hover:text-accent transition-colors">
            <i class="fa fa-globe"></i>
            <span><?php echo $t['lang'][$lang]; ?></span>
            <i class="fa fa-angle-down text-xs"></i>
          </button>
          <div class="absolute right-0 mt-2 w-32 bg-primary/90 backdrop-blur-sm rounded-md shadow-lg border border-accent/20 overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
            <?php foreach($availableLangs as $availableLang): ?>
              <?php if($availableLang != $lang): ?>
                <a href="?lang=<?php echo $availableLang; ?>" class="block px-4 py-2 hover:bg-accent/10 transition-colors">
                  <?php echo $t['lang'][$availableLang]; ?>
                </a>
              <?php endif; ?>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <button id="menu-toggle" class="md:hidden text-2xl text-light hover:text-accent transition-colors">
        <i class="fa fa-bars"></i>
      </button>
    </nav>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-primary/95 backdrop-blur-sm border-b border-accent/20">
      <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
        <?php foreach($t['nav'] as $item): ?>
          <?php if(isset($item['isCta']) && $item['isCta']): ?>
            <a href="<?php echo $item['link']; ?>" class="bg-accent hover:bg-accent/90 text-primary font-bold py-3 px-6 rounded-md text-center transition-all border border-accent/50">
              <?php echo $item['name']; ?>
            </a>
          <?php else: ?>
            <a href="<?php echo $item['link']; ?>" class="py-2 hover:text-accent transition-colors border-b border-accent/10">
              <?php echo $item['name']; ?>
            </a>
          <?php endif; ?>
        <?php endforeach; ?>
        
        <!-- 移动端语言选择器 -->
        <div class="pt-2 border-t border-accent/20">
          <p class="text-light/60 mb-2">
            <?php echo $t['lang'][$lang]; ?>
          </p>
          <div class="flex flex-wrap gap-3">
            <?php foreach($availableLangs as $availableLang): ?>
              <a href="?lang=<?php echo $availableLang; ?>" class="px-4 py-2 rounded-md <?php echo $availableLang == $lang ? 'bg-accent/20 border border-accent/40' : 'bg-primary/50 hover:bg-accent/10 transition-colors'; ?>">
                <?php echo $t['lang'][$availableLang]; ?>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    </div>
  </header>

  <main>
    <!-- 英雄区 - 采用全屏分栏布局 -->
    <section class="relative min-h-screen flex flex-col md:flex-row">
      <!-- 左侧内容区 -->
      <div class="w-full md:w-1/2 flex items-center justify-center p-8 md:p-16 relative z-10">
        <div class="max-w-xl">
          <div class="mb-6 inline-block">
            <span class="text-xs uppercase tracking-widest text-accent/80 border border-accent/30 px-3 py-1 rounded-full">
              <?php echo $t['hero']['version'] ?? ''; ?>
            </span>
          </div>
          <h1 class="text-[clamp(2.5rem,8vw,4rem)] font-bold mb-6 leading-tight">
            <?php echo $t['hero']['title']; ?>
          </h1>
          <p class="text-[clamp(1rem,3vw,1.25rem)] text-light/80 mb-10 max-w-lg">
            <?php echo $t['hero']['subtitle']; ?>
          </p>
          <div class="flex flex-col sm:flex-row gap-4">
            <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="bg-accent hover:bg-accent/90 text-primary font-bold py-3 px-8 rounded-md text-lg transition-all transform hover:scale-105 border border-accent/50 text-center">
              <?php echo $t['hero']['cta1']['text']; ?>
            </a>
            <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="bg-transparent border-2 border-accent/50 hover:border-accent hover:text-accent font-bold py-3 px-8 rounded-md text-lg transition-all flex items-center justify-center gap-2">
              <i class="fa <?php echo $t['hero']['cta2']['icon']; ?>"></i> <?php echo $t['hero']['cta2']['text']; ?>
            </a>
          </div>
          
          <!-- 数据统计 -->
          <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
            <?php foreach($t['preRegister']['stats'] as $stat): ?>
              <div>
                <div class="text-2xl md:text-3xl font-bold text-accent mb-1"><?php echo $stat['value']; ?></div>
                <div class="text-sm text-light/60"><?php echo $stat['label']; ?></div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
      
      <!-- 右侧视觉区 -->
      <div class="w-full md:w-1/2 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-primary via-primary/70 to-transparent z-10 md:hidden"></div>
        <div class="absolute inset-0 bg-gradient-to-l from-primary via-primary/30 to-transparent z-10 hidden md:block"></div>
        <img src="https://picsum.photos/id/156/1920/1080" alt="" class="w-full h-full object-cover">
        
        <!-- 装饰性网格和线条 -->
        <div class="absolute inset-0 z-20 pointer-events-none">
          <div class="h-full w-px bg-accent/30 animate-pulse-fast ml-1/2"></div>
          <div class="w-full h-px bg-accent/30 animate-pulse-fast mt-1/2"></div>
        </div>
      </div>
    </section>

    <!-- 游戏特色 - 采用左右交错布局 -->
    <section id="features" class="py-20 relative">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16 max-w-3xl mx-auto">
          <span class="text-xs uppercase tracking-widest text-accent/80 border border-accent/30 px-3 py-1 rounded-full">
            <?php echo $t['features']['pretitle']; ?>
          </span>
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 mt-4"><?php echo $t['features']['title']; ?></h2>
          <p class="text-light/70 text-lg"><?php echo $t['features']['subtitle']; ?></p>
        </div>
        
        <div class="space-y-24">
          <?php foreach(array_chunk($t['features']['items'], 2) as $chunkIndex => $chunk): ?>
            <?php foreach($chunk as $index => $feature): ?>
              <div class="flex flex-col md:flex-row items-center gap-10 <?php echo ($chunkIndex * 2 + $index) % 2 == 1 ? 'md:flex-row-reverse' : ''; ?>">
                <div class="w-full md:w-1/2 order-2 md:order-<?php echo ($chunkIndex * 2 + $index) % 2 == 1 ? 1 : 2; ?>">
                  <div class="w-12 h-12 rounded-full bg-accent/10 border border-accent/30 flex items-center justify-center mb-6">
                    <i class="fa <?php echo $feature['icon']; ?> text-xl text-accent"></i>
                  </div>
                  <h3 class="text-2xl font-bold mb-4"><?php echo $feature['title']; ?></h3>
                  <p class="text-light/70"><?php echo $feature['desc']; ?></p>
                </div>
                <div class="w-full md:w-1/2 order-1 md:order-<?php echo ($chunkIndex * 2 + $index) % 2 == 1 ? 2 : 1; ?> relative">
                  <div class="aspect-video rounded-lg overflow-hidden border border-accent/20 relative group">
                    <img src="https://picsum.photos/id/<?php echo 50 + $chunkIndex * 2 + $index; ?>/800/450" alt="<?php echo $feature['title']; ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                  </div>
                  <!-- 装饰性元素 -->
                  <div class="absolute -bottom-4 -right-4 w-full h-full rounded-lg border border-accent/30 -z-10"></div>
                </div>
              </div>
            <?php endforeach; ?>
          <?php endforeach; ?>
        </div>
      </div>
    </section>

    <!-- 角色介绍 - 采用横向滚动卡片 -->
    <section id="characters" class="py-20 bg-primary/30 relative">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16 max-w-3xl mx-auto">
          <span class="text-xs uppercase tracking-widest text-accent/80 border border-accent/30 px-3 py-1 rounded-full">
            <?php echo $t['characters']['pretitle']; ?>
          </span>
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 mt-4"><?php echo $t['characters']['title']; ?></h2>
          <p class="text-light/70 text-lg"><?php echo $t['characters']['subtitle']; ?></p>
        </div>
        
        <!-- 横向滚动容器 -->
        <div class="relative">
          <div class="overflow-x-auto pb-8 scrollbar-hide">
            <div class="flex space-x-6 min-w-max px-1">
              <?php foreach($t['characters']['items'] as $index => $character): ?>
                <div class="w-72 bg-primary/50 backdrop-blur-sm rounded-lg overflow-hidden border border-accent/20 hover:border-accent/40 transition-all transform hover:-translate-y-2 group">
                  <div class="h-80 relative overflow-hidden">
                    <img src="<?php echo $character['image']; ?>" alt="<?php echo $character['alt']; ?>" class="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-primary via-primary/40 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                      <div class="text-xs uppercase tracking-wider text-accent/80 bg-accent/10 rounded-full px-3 py-1 inline-block mb-2">
                        <?php echo $character['class']; ?>
                      </div>
                      <h3 class="text-xl font-bold"><?php echo $character['name']; ?></h3>
                    </div>
                  </div>
                  <div class="p-6">
                    <p class="text-light/70 text-sm mb-4"><?php echo $character['desc']; ?></p>
                    <a href="#" class="text-accent hover:text-accent/80 text-sm font-medium flex items-center transition-colors">
                      <?php echo $character['moreLink']; ?>
                      <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                  </div>
                </div>
              <?php endforeach; ?>
            </div>
          </div>
          
          <!-- 滚动提示 -->
          <div class="hidden md:flex absolute top-1/2 -left-4 transform -translate-y-1/2">
            <div class="w-10 h-10 rounded-full bg-primary/80 border border-accent/30 flex items-center justify-center animate-pulse">
              <i class="fa fa-angle-left text-accent"></i>
            </div>
          </div>
          <div class="hidden md:flex absolute top-1/2 -right-4 transform -translate-y-1/2">
            <div class="w-10 h-10 rounded-full bg-primary/80 border border-accent/30 flex items-center justify-center animate-pulse">
              <i class="fa fa-angle-right text-accent"></i>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-12">
          <a href="#" class="inline-flex items-center gap-2 text-accent hover:text-accent/80 font-medium transition-colors">
            <?php echo $t['characters']['moreLink']; ?> <i class="fa fa-long-arrow-right"></i>
          </a>
        </div>
      </div>
    </section>

    <!-- 游戏截图 - 采用不规则网格布局 -->
    <section id="screenshots" class="py-20 relative">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16 max-w-3xl mx-auto">
          <span class="text-xs uppercase tracking-widest text-accent/80 border border-accent/30 px-3 py-1 rounded-full">
            <?php echo $t['screenshots']['pretitle']; ?>
          </span>
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 mt-4"><?php echo $t['screenshots']['title']; ?></h2>
          <p class="text-light/70 text-lg"><?php echo $t['screenshots']['subtitle']; ?></p>
        </div>
        
        <!-- 不规则网格布局 -->
        <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
          <div class="md:col-span-8 md:row-span-2 overflow-hidden rounded-lg group relative">
            <img src="<?php echo $t['screenshots']['items'][0]['image']; ?>" alt="<?php echo $t['screenshots']['items'][0]['alt']; ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
            <div class="absolute inset-0 bg-accent/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <i class="fa fa-search-plus text-4xl text-accent"></i>
            </div>
          </div>
          <div class="md:col-span-4 overflow-hidden rounded-lg group relative">
            <img src="<?php echo $t['screenshots']['items'][1]['image']; ?>" alt="<?php echo $t['screenshots']['items'][1]['alt']; ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
            <div class="absolute inset-0 bg-accent/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <i class="fa fa-search-plus text-4xl text-accent"></i>
            </div>
          </div>
          <div class="md:col-span-4 overflow-hidden rounded-lg group relative">
            <img src="<?php echo $t['screenshots']['items'][2]['image']; ?>" alt="<?php echo $t['screenshots']['items'][2]['alt']; ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
            <div class="absolute inset-0 bg-accent/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <i class="fa fa-search-plus text-4xl text-accent"></i>
            </div>
          </div>
          <div class="md:col-span-8 overflow-hidden rounded-lg group relative">
            <img src="<?php echo $t['screenshots']['items'][3]['image']; ?>" alt="<?php echo $t['screenshots']['items'][3]['alt']; ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
            <div class="absolute inset-0 bg-accent/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <i class="fa fa-search-plus text-4xl text-accent"></i>
            </div>
          </div>
          <div class="md:col-span-6 overflow-hidden rounded-lg group relative">
            <img src="<?php echo $t['screenshots']['items'][4]['image']; ?>" alt="<?php echo $t['screenshots']['items'][4]['alt']; ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
            <div class="absolute inset-0 bg-accent/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <i class="fa fa-search-plus text-4xl text-accent"></i>
            </div>
          </div>
          <div class="md:col-span-6 overflow-hidden rounded-lg group relative">
            <img src="<?php echo $t['screenshots']['items'][5]['image']; ?>" alt="<?php echo $t['screenshots']['items'][5]['alt']; ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
            <div class="absolute inset-0 bg-accent/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <i class="fa fa-search-plus text-4xl text-accent"></i>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-12">
          <a href="#" class="inline-block bg-transparent border-2 border-accent/50 hover:border-accent hover:bg-accent/10 text-light font-bold py-3 px-8 rounded-md transition-all">
            <?php echo $t['screenshots']['moreLink']; ?>
          </a>
        </div>
      </div>
    </section>

    <!-- 游戏预告片 - 采用居中大尺寸设计 -->
    <section id="trailer" class="py-20 bg-primary/20 relative">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16 max-w-3xl mx-auto">
          <span class="text-xs uppercase tracking-widest text-accent/80 border border-accent/30 px-3 py-1 rounded-full">
            <?php echo $t['trailer']['pretitle']; ?>
          </span>
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 mt-4"><?php echo $t['trailer']['title']; ?></h2>
          <p class="text-light/70 text-lg"><?php echo $t['trailer']['subtitle']; ?></p>
        </div>
        
        <div class="max-w-5xl mx-auto">
          <div class="relative rounded-lg overflow-hidden aspect-video border border-accent/30 group cursor-pointer">
            <img src="<?php echo $t['trailer']['image']; ?>" alt="<?php echo $t['trailer']['alt']; ?>" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-primary via-primary/40 to-transparent"></div>
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="w-20 h-20 rounded-full bg-accent/90 flex items-center justify-center transform transition-transform group-hover:scale-110 border-glow">
                <i class="fa fa-play text-xl text-primary pl-1"></i>
              </div>
            </div>
            
            <!-- 装饰性元素 -->
            <div class="absolute top-4 left-4 border border-accent/50 rounded px-3 py-1 bg-primary/70 backdrop-blur-sm text-sm">
              <?php echo $t['trailer']['moreLink']; ?>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新动态 - 采用卡片堆叠设计 -->
    <section id="news" class="py-20 relative">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16 max-w-3xl mx-auto">
          <span class="text-xs uppercase tracking-widest text-accent/80 border border-accent/30 px-3 py-1 rounded-full">
            <?php 
            switch($lang) {
                case 'zh': echo '最新资讯'; break;
                case 'en': echo 'Latest Updates'; break;
                case 'ja': echo '最新情報'; break;
            }
            ?>
          </span>
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 mt-4"><?php echo $t['news']['title']; ?></h2>
          <p class="text-light/70 text-lg"><?php echo $t['news']['subtitle']; ?></p>
        </div>
        
        <div class="relative">
          <!-- 主要新闻卡片 -->
          <div class="max-w-4xl mx-auto bg-primary/40 backdrop-blur-sm rounded-lg overflow-hidden border border-accent/20 mb-8">
            <div class="md:flex">
              <div class="md:w-2/5">
                <img src="<?php echo $t['news']['items'][0]['image']; ?>" alt="<?php echo $t['news']['items'][0]['title']; ?>" class="w-full h-full object-cover">
              </div>
              <div class="md:w-3/5 p-6 md:p-8">
                <div class="flex items-center text-sm text-light/60 mb-3">
                  <span class="flex items-center"><i class="fa fa-calendar-o mr-2"></i> <?php echo $t['news']['items'][0]['date']; ?></span>
                  <span class="mx-3">•</span>
                  <span class="flex items-center bg-accent/10 text-accent px-2 py-0.5 rounded text-xs">
                    <?php echo $t['news']['items'][0]['category']; ?>
                  </span>
                </div>
                <h3 class="text-2xl font-bold mb-3 hover:text-accent transition-colors">
                  <a href="#"><?php echo $t['news']['items'][0]['title']; ?></a>
                </h3>
                <p class="text-light/70 mb-4"><?php echo $t['news']['items'][0]['desc']; ?></p>
                <a href="#" class="inline-flex items-center text-accent hover:text-accent/80 font-medium transition-colors">
                  <?php echo $t['readMore']; ?> <i class="fa fa-angle-right ml-1"></i>
                </a>
              </div>
            </div>
          </div>
          
          <!-- 次要新闻卡片 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            <?php for($i = 1; $i < count($t['news']['items']); $i++): ?>
              <article class="bg-primary/30 backdrop-blur-sm rounded-lg overflow-hidden border border-accent/10 hover:border-accent/30 transition-all flex">
                <div class="w-1/3">
                  <img src="<?php echo $t['news']['items'][$i]['image']; ?>" alt="<?php echo $t['news']['items'][$i]['title']; ?>" class="w-full h-full object-cover">
                </div>
                <div class="w-2/3 p-4">
                  <div class="text-xs text-light/60 mb-2">
                    <?php echo $t['news']['items'][$i]['date']; ?>
                  </div>
                  <h3 class="text-lg font-bold mb-2 hover:text-accent transition-colors line-clamp-2">
                    <a href="#"><?php echo $t['news']['items'][$i]['title']; ?></a>
                  </h3>
                  <a href="#" class="text-xs text-accent hover:text-accent/80 transition-colors">
                    <?php echo $t['readMore']; ?>
                  </a>
                </div>
              </article>
            <?php endfor; ?>
          </div>
        </div>
        
        <div class="text-center mt-12">
          <a href="#" class="inline-block bg-transparent border-2 border-accent/50 hover:border-accent hover:bg-accent/10 text-light font-bold py-3 px-8 rounded-md transition-all">
            <?php echo $t['news']['moreLink']; ?>
          </a>
        </div>
      </div>
    </section>

    <!-- 预注册区域 - 采用科技感表单设计 -->
    <section id="pre-register" class="py-20 bg-gradient-to-b from-primary/40 to-primary/20 relative overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute top-0 left-0 w-full h-full">
        <div class="absolute top-0 left-0 w-full h-full bg-grid opacity-30"></div>
        <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-accent/10 blur-3xl"></div>
        <div class="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-secondary/10 blur-3xl"></div>
      </div>
      
      <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-5xl mx-auto">
          <div class="bg-primary/60 backdrop-blur-md rounded-xl border border-accent/30 overflow-hidden">
            <div class="md:flex">
              <!-- 左侧内容 -->
              <div class="md:w-1/2 p-8 md:p-12">
                <span class="text-xs uppercase tracking-widest text-accent/80 border border-accent/30 px-3 py-1 rounded-full">
                  <?php 
                  switch($lang) {
                      case 'zh': echo '限时活动'; break;
                      case 'en': echo 'Limited Time Event'; break;
                      case 'ja': echo '期間限定イベント'; break;
                  }
                  ?>
                </span>
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-6 mt-4"><?php echo $t['preRegister']['title']; ?></h2>
                <p class="text-light/80 mb-8">
                  <?php echo $t['preRegister']['subtitle']; ?>
                </p>
                
                <!-- 注册表单 -->
                <form class="space-y-4">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label for="name-alt" class="block text-left text-sm text-light/70 mb-1"><?php echo $t['preRegister']['form']['name']; ?></label>
                      <input type="text" id="name-alt" class="w-full bg-primary/40 border border-accent/30 rounded-md px-4 py-3 text-light focus:outline-none focus:border-accent transition-colors" placeholder="<?php echo $t['preRegister']['form']['placeholderName']; ?>">
                    </div>
                    <div>
                      <label for="phone-alt" class="block text-left text-sm text-light/70 mb-1"><?php echo $t['preRegister']['form']['phone']; ?></label>
                      <input type="tel" id="phone-alt" class="w-full bg-primary/40 border border-accent/30 rounded-md px-4 py-3 text-light focus:outline-none focus:border-accent transition-colors" placeholder="<?php echo $t['preRegister']['form']['placeholderPhone']; ?>">
                    </div>
                  </div>
                  
                  <div>
                    <label for="email-alt" class="block text-left text-sm text-light/70 mb-1"><?php echo $t['preRegister']['form']['email']; ?></label>
                    <input type="email" id="email-alt" class="w-full bg-primary/40 border border-accent/30 rounded-md px-4 py-3 text-light focus:outline-none focus:border-accent transition-colors" placeholder="<?php echo $t['preRegister']['form']['placeholderEmail']; ?>">
                  </div>
                  
                  <div class="flex items-start">
                    <input type="checkbox" id="agreement-alt" class="mt-1 mr-3">
                    <label for="agreement-alt" class="text-sm text-light/70 text-left">
                      <?php echo $t['preRegister']['form']['agreement']; ?>
                    </label>
                  </div>
                  
                  <button type="submit" class="w-full bg-accent hover:bg-accent/90 text-primary font-bold py-4 px-6 rounded-md text-lg transition-all transform hover:scale-[1.02] border border-accent/50 border-glow">
                    <?php echo $t['preRegister']['form']['submit']; ?>
                  </button>
                </form>
              </div>
              
              <!-- 右侧视觉区 -->
              <div class="md:w-1/2 relative hidden md:block">
                <img src="https://picsum.photos/id/119/800/1200" alt="<?php 
                  switch($lang) {
                      case 'zh': echo '预注册奖励'; break;
                      case 'en': echo 'Pre-registration Rewards'; break;
                      case 'ja': echo '事前登録特典'; break;
                  }
                ?>" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-l from-primary via-primary/70 to-transparent"></div>
                
                <!-- 奖励信息 -->
                <div class="absolute bottom-8 left-8 right-8">
                  <h3 class="text-2xl font-bold mb-4 text-accent text-glow">
                    <?php 
                    switch($lang) {
                        case 'zh': echo '预注册专属奖励'; break;
                        case 'en': echo 'Exclusive Pre-registration Rewards'; break;
                        case 'ja': echo '事前登録限定特典'; break;
                    }
                    ?>
                  </h3>
                  <ul class="space-y-3">
                    <?php 
                    $rewards = [
                      ['text' => '限定角色皮肤', 'en' => 'Exclusive Character Skin', 'ja' => '限定キャラクタースキン'],
                      ['text' => '游戏内货币 x 1000', 'en' => 'In-game Currency x 1000', 'ja' => 'ゲーム内通貨 x 1000'],
                      ['text' => '稀有装备箱', 'en' => 'Rare Equipment Box', 'ja' => 'レア装備ボックス'],
                      ['text' => '提前体验权限', 'en' => 'Early Access Privileges', 'ja' => '早期体験権限']
                    ];
                    foreach($rewards as $reward): ?>
                      <li class="flex items-center">
                        <i class="fa fa-check text-accent mr-3"></i>
                        <span class="text-light/90">
                          <?php 
                          switch($lang) {
                              case 'zh': echo $reward['text']; break;
                              case 'en': echo $reward['en']; break;
                              case 'ja': echo $reward['ja']; break;
                          }
                          ?>
                        </span>
                      </li>
                    <?php endforeach; ?>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 - 采用简约科技感设计 -->
  <footer class="bg-primary border-t border-accent/20 pt-16 pb-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        <div>
          <div class="flex items-center space-x-2 mb-6">
            <div class="w-10 h-10 rounded-full bg-accent/20 border border-accent/40 flex items-center justify-center">
              <i class="fa fa-gamepad text-accent"></i>
            </div>
            <span class="text-2xl font-bold text-accent text-glow">
              <?php 
              // 根据当前语言显示对应的游戏名称
              switch($lang) {
                  case 'zh': echo '我的完美世界'; break;
                  case 'en': echo 'My Perfect World'; break;
                  case 'ja': echo '俺のパーフェクトワールド'; break;
              }
              ?>
            </span>
          </div>
          <p class="text-light/70 mb-6">
            <?php echo $t['footer']['description']; ?>
          </p>
          <div class="flex space-x-4">
            <?php 
            $socialIcons = [
              ['icon' => 'fa-weibo', 'link' => '#'],
              ['icon' => 'fa-wechat', 'link' => '#'],
              ['icon' => 'fa-bilibili', 'link' => '#'],
              ['icon' => 'fa-youtube-play', 'link' => '#']
            ];
            foreach($socialIcons as $social): ?>
              <a href="<?php echo $social['link']; ?>" class="w-10 h-10 rounded-full bg-primary/50 border border-accent/30 flex items-center justify-center hover:bg-accent/10 transition-colors">
                <i class="fa <?php echo $social['icon']; ?> text-accent"></i>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
        
        <?php foreach($t['footer']['links'] as $linkGroup): ?>
          <div>
            <h4 class="text-lg font-bold mb-6 text-accent"><?php echo $linkGroup['title']; ?></h4>
            <ul class="space-y-3">
              <?php foreach($linkGroup['items'] as $link): ?>
                <li><a href="<?php echo $link['link']; ?>" class="text-light/70 hover:text-accent transition-colors"><?php echo $link['name']; ?></a></li>
              <?php endforeach; ?>
            </ul>
          </div>
        <?php endforeach; ?>
        
        <div>
          <h4 class="text-lg font-bold mb-6 text-accent"><?php echo $t['footer']['subscribe']; ?></h4>
          <p class="text-light/70 mb-4"><?php echo $t['footer']['subscribeDesc']; ?></p>
          <form class="flex mb-4">
            <input type="email" placeholder="<?php echo $t['footer']['subscribePlaceholder']; ?>" class="flex-1 bg-primary/40 border border-accent/30 rounded-l-md px-4 py-2 text-light focus:outline-none focus:border-accent transition-colors">
            <button type="submit" class="bg-accent hover:bg-accent/90 text-primary px-4 py-2 rounded-r-md transition-colors">
              <i class="fa fa-paper-plane"></i>
            </button>
          </form>
          <p class="text-xs text-light/50">
            <?php echo $t['footer']['privacyNote']; ?>
          </p>
        </div>
      </div>
      
      <div class="pt-8 border-t border-accent/10 flex flex-col md:flex-row justify-between items-center">
        <div class="text-light/50 text-sm mb-4 md:mb-0">
          <?php echo $t['footer']['copyright']; ?>
        </div>
        <div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
          <?php foreach($t['footer']['legalLinks'] as $legalLink): ?>
            <a href="<?php echo $legalLink['link']; ?>" class="text-light/50 hover:text-accent text-sm transition-colors"><?php echo $legalLink['name']; ?></a>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </footer>

  <!-- 返回顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary/80 border border-accent/30 flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50 hover:bg-accent hover:text-primary">
    <i class="fa fa-angle-up text-xl"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    const backToTop = document.getElementById('back-to-top');
    
    window.addEventListener('scroll', function() {
      if (window.scrollY > 100) {
        navbar.classList.add('py-2', 'shadow-lg', 'shadow-accent/10');
        navbar.classList.remove('py-3');
        
        backToTop.classList.remove('opacity-0', 'invisible');
        backToTop.classList.add('opacity-100', 'visible');
      } else {
        navbar.classList.add('py-3');
        navbar.classList.remove('py-2', 'shadow-lg', 'shadow-accent/10');
        
        backToTop.classList.add('opacity-0', 'invisible');
        backToTop.classList.remove('opacity-100', 'visible');
      }
    });
    
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    
    menuToggle.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
      const icon = menuToggle.querySelector('i');
      if (icon.classList.contains('fa-bars')) {
        icon.classList.replace('fa-bars', 'fa-times');
      } else {
        icon.classList.replace('fa-times', 'fa-bars');
      }
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        // 关闭移动菜单（如果打开）
        if (!mobileMenu.classList.contains('hidden')) {
          mobileMenu.classList.add('hidden');
          const icon = menuToggle.querySelector('i');
          icon.classList.replace('fa-times', 'fa-bars');
        }
        
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
        }
      });
    });
    
    // 返回顶部按钮
    backToTop.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  </script>
</body>
</html>
